﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "外协入库";
    Layout = null;
}
<link href="~/layui/css/layui.css" rel="stylesheet" />
<script src="~/layui/layui.js"></script>

<style>
    body {
        padding: 15px;
    }
    .layui-form-item .layui-input-inline {
        width: 200px;
    }
</style>

<div class="layui-form layui-form-pane" lay-filter="search-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">入库单编号</label>
            <div class="layui-input-inline">
                <input type="text" name="InboundCode" placeholder="请输入入库单编号" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">外协工单号</label>
            <div class="layui-input-inline">
                <input type="text" name="WorkOrders" placeholder="请输入外协工单号" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">供应商名称</label>
            <div class="layui-input-inline">
                <input type="text" name="Vendor" placeholder="请输入供应商名称" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">入库日期</label>
            <div class="layui-input-inline">
                <input type="text" name="InboundDate" id="InboundDate" placeholder="请选择入库日期" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn" lay-submit lay-filter="search-btn">
                <i class="layui-icon layui-icon-search"></i> 搜索
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="reset-btn">
                <i class="layui-icon layui-icon-refresh"></i> 重置
            </button>
        </div>
    </div>
</div>

<div class="layui-btn-group">
    <button type="button" class="layui-btn" id="add-btn">
        <i class="layui-icon layui-icon-add-1"></i> 新增
    </button>
</div>

<table id="outsourcing-table" lay-filter="outsourcing-table"></table>

<script type="text/html" id="operationBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
    {{# if(d.documentStatus === 2){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="inbound"><i class="layui-icon layui-icon-ok"></i>执行入库</a>
    {{# } }}
</script>

<script>
    layui.use(['table', 'form', 'laydate', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var $ = layui.$;

        // 日期选择
        laydate.render({
            elem: '#InboundDate'
        });

        // 表格渲染
        var tableIns = table.render({
            elem: '#outsourcing-table',
            url: '/Outsourcing/OutsourcingList',
            page: true,
            limit: 10,
            limits: [10, 20, 50, 100],
            request: {
                    pageName: 'pageIndex',
                    limitName: 'pageSize'
                },
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'inboundCode', title: '入库单编号', width: 180 },
                { field: 'inboundName', title: '入库单名称', width: 150 },
                { field: 'workOrders', title: '外协工单号', width: 150 },
                { field: 'vendor', title: '供应商名称', width: 200 },
                { field: 'inboundDate', title: '入库日期', width: 200, templet: function (d) {
                    return d.inboundDate ? layui.util.toDateString(new Date(d.inboundDate), 'yyyy-MM-dd') : '';
                }},
                { field: 'documentStatus', title: '单据状态', width: 150, templet: function (d) {
                    switch(parseInt(d.documentStatus)){
                        case 1:
                            return '<span class="layui-badge">草稿</span>';
                        case 2:
                            return '<span class="layui-badge layui-bg-blue">待入库</span>';
                        case 3:
                            return '<span class="layui-badge layui-bg-green">已入库</span>';
                        default:
                            return '<span class="layui-badge layui-bg-gray">未知状态</span>';
                    }
                }},
                { title: '操作', toolbar: '#operationBar', fixed: 'right', width: 350 }
            ]],
            response: {
                statusCode: 0
            },
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
        });

        // 搜索
        form.on('submit(search-btn)', function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });

        // 重置
        $('#reset-btn').on('click', function () {
            // 直接刷新整个页面
            window.location.reload();
        });

        // 新增按钮点击事件
        $('#add-btn').on('click', function () {
            layer.open({
                type: 2,
                title: '添加外协入库单',
                area: ['800px', '600px'],
                content: '/Outsourcing/OutsourcingAdd',
                end: function () {
                    tableIns.reload();
                }
            });
        });

        // 表格工具条事件
        table.on('tool(outsourcing-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '修改外协入库单',
                    area: ['800px', '600px'],
                    content: '/Outsourcing/OutsourcingEdit?id=' + data.id,
                    end: function () {
                        tableIns.reload();
                    }
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定要删除该记录吗？', function (index) {
                    $.ajax({
                        url: '/Outsourcing/DeleteOutsourcing',
                        type: 'POST',
                        data: { id: data.id },
                        success: function (res) {
                            if (res.success) {
                                layer.msg('删除成功');
                                tableIns.reload();
                            } else {
                                layer.msg('删除失败: ' + res.message);
                            }
                        },
                        error: function () {
                            layer.msg('操作失败，请稍后再试');
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'inbound') {
                layer.confirm('确定要执行入库操作吗？此操作将状态变更为已入库，不可逆转。', function (index) {
                    $.ajax({
                        url: '/Outsourcing/UpdateIsLock',
                        type: 'POST',
                        data: { id: data.id },
                        success: function (res) {
                            if (res.success) {
                                layer.msg('入库成功');
                                tableIns.reload();
                            } else {
                                layer.msg('入库失败: ' + res.message);
                            }
                        },
                        error: function () {
                            layer.msg('操作失败，请稍后再试');
                        }
                    });
                    layer.close(index);
                });
            }
        });

        // 批量删除
        $('#delete-btn').on('click', function () {
            var checkStatus = table.checkStatus('outsourcing-table');
            var data = checkStatus.data;
            if (data.length === 0) {
                layer.msg('请选择要删除的记录');
                return;
            }
            layer.confirm('确定要删除选中的' + data.length + '条记录吗？', function (index) {
                var ids = [];
                $.each(data, function (i, item) {
                    ids.push(item.id);
                });
                // 这里需要后端支持批量删除，或者前端循环调用单条删除
                layer.close(index);
            });
        });
    });
</script>

